<template>
	<view class="cont">
		<view class="text-ss margin-bottom-xs">交易编号：{{detail.order_sn}}</view>
		<view class="text-ss">卖出时间：{{detail.created_at}}</view>
		<view class="card">
			<view class="text-lg text-cut margin-bottom-xs">{{detail.title}}</view>
			<view>
				<text class="text-lg text-bold" style="color: #FC4E11;">{{detail.vip == 0 ? '价格' : '会员价格'}} ：￥{{price}}</text>
			</view>
		</view>
		<view class="desc flex flex-direction align-center padding-tb margin-bottom-lg">
			<view class="text-ss text-bold margin-bottom">· 券码使用信息 ·</view>
			
			<view class="flex align-center margin-bottom-sm">
				<text class="text-ss text-bold">劵码号：</text>
				<text class="text-df">{{  detail.discern_code ? detail.discern_code : detail.code ? detail.code : '暂无券码号' }}</text>
			</view>
			
			<button v-if="detail.img" @click="onLookPicture" class="cu-btn bg-green radius shadow-blur margin-bottom-lg">查看券码图片</button>
			
			<block v-if="detail.status == 1 || detail.status == 3">
				<text class="text-df text-green">交易中</text>
			</block>
			
			<block v-if="detail.status == 4">
				<view class="text-df text-gray">已完成</view>
			</block>
			
			<block v-if="detail.status == 5">
				<view class="text-df text-orange">售后处理中</view>
			</block>
		</view>
		
		<block v-if="detail.status == -1">
			<view class="flex flex-direction align-start">
				<view class="text-bold text-lg margin-bottom-xs">审核未通过原因：</view>
				<text class="text-left text-df text-grey" style="color: #222;">{{detail.msg || '暂无原因'}}</text>
			</view>
		</block>
		
		<block v-if="detail.status == 0">
			<bottom-bar buttonText="撤销订单" @submit="onSubmit"></bottom-bar>
		</block>
		
		<block v-if="detail.status == -1">
			<bottom-bar buttonText="我知道了" @submit="onDelete"></bottom-bar>
		</block>
		
		<buy-hint ref="isBuyHintPopup" top="50" title="撤销成功">
			<view class="text-gray text-center">
				您当前交易的订单已撤销
			</view>
			<button @click="onCallBack" style="width: 200rpx;" class="cu-btn bg-green round shadow-blur margin-top-lg">确 定</button>
		</buy-hint>
		
		<buy-hint ref="isDeletePopup" top="50" title="删除成功">
			<view class="text-gray text-center">
				您当前交易的订单已删除
			</view>
			<button @click="onDeleteCallBack" style="width: 200rpx;" class="cu-btn bg-green round shadow-blur margin-top-lg">确 定</button>
		</buy-hint>
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	import { countTime, alert } from "@/utils/util.js"
	import Prompt from "@/components/Prompt.vue"
	import BottomBar from "@/components/BottomBar.vue"
	import BuyHint from "@/components/BuyHint.vue"
	import TicketApi from "@/Api/Ticket.js"
	export default {
		components: {
			Prompt,
			BottomBar,
			BuyHint
		},
		data() {
			return {
				loading: true,
				id: null,
				price: 0,
				detail: null,
			};
		},
		onLoad(obj) {
			this.id = obj.id
			this.price = obj.price
			this.getDetail()
		},
		methods: {
			getDetail() {
				TicketApi.getToickDetail(this.id)
					.then(res=> {
						this.detail = res
						this.loading = false
					})
			},
			// 撤销订单
			 onSubmit() {
				 alert('您确定要撤销订单吗？','提示', true)
					.then(()=> TicketApi.ToickUndo(this.id))
					.then(res=> this.$refs.isBuyHintPopup.show())
			 },
			 // 删除订单
			 onDelete() {
				 alert('您是否要删除该订单并前去上传新的交易订单？','提示',true)
					.then(()=> TicketApi.ToickUndo(this.id))
					.then(res=> this.$refs.isDeletePopup.show())
			 },
			 
			 onCallBack() {
				 this.$refs.isBuyHintPopup.close()
				 setTimeout(()=> uni.navigateBack(), 500)
			 },
			 
			 onDeleteCallBack() {
				 this.$refs.isDeletePopup.close()
				 setTimeout(()=> uni.switchTab({
				 	url: '/pages/Tab/SellTicket/SellTicket'
				 }),500)
			 },
			 
			 onLookPicture() {
				 uni.previewImage({
				 	current: this.detail.img,
					urls: [this.detail.img]
				 })
			 }
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.cont{
		padding: 20rpx 40rpx;
		.card{
			margin-top: 30rpx;
			padding: 30rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 10px 30px 0 rgba(0,0,0,0.10);
		}
	}
</style>
